<template>
  <div>
    <Search :roleData="roleData" />
    <el-container>
      <el-aside width="280px" style="padding-top: 10px"
        ><DepartmentTree :deptData="deptData"
      /></el-aside>
      <el-main style="padding: 0 0 20px 20px"><List /></el-main>
    </el-container>
    <SetRole :roleData="roleData" />
    <SetDepartment :deptData="deptData" />
    <ColumnPermission authorType="1" />
  </div>
</template>
<script>
export default {
  components: {
    Search: () => import("./components/Search.vue"),
    DepartmentTree: () => import("./components/DepartmentTree.vue"),
    List: () => import("./components/List.vue"),
    SetRole: () => import("./components/SetRole.vue"),
    SetDepartment: () => import("./components/SetDepartment.vue"),
    ColumnPermission: () => import("../role/components/ColumnPermission.vue"),
  },
  data() {
    return {
      deptData: [],
      roleData: [],
    };
  },
  mounted() {
    this.getDeptList();
    this.getRoleData();
  },
  methods: {
    //查询部门
    async getDeptList() {
      let res = await this.$store.dispatch("queryTbDeptList", { pId: "0" });
      this.deptData = res.data;
      this.$store.commit("SET_Dept", this.deptData);
    },
    //获取角色数据
    async getRoleData() {
      let obj = {
        page: 1,
        limit: 99,
        type: 1,
      };
      let res = await this.$store.dispatch("queryTbRoleList", obj);
      this.roleData = res.data;
      this.$store.commit("SET_Role", this.roleData);
    },
  },
};
</script>
<style scoped lang="scss"></style>
